<script setup lang="ts">
import { useFileDialog } from "@vueuse/core";
import processFile from "./processFile";

const { files, open } = useFileDialog({
  accept: "*" // Set to accept only image files
});
watch(files, async () => {
  const fileArray = unref(files);
  if (!fileArray) return;
  const selectedFile = fileArray[0];
  processFile(selectedFile);
});

const count = ref(0);

// onChange((files) => {
//   /** do something with files */
// });
</script>

<template>
  <button type="button" @click="open()"> Choose file </button>
  <el-button @click="count++">Add</el-button>
  {{ count }}
</template>

<style scoped></style>
